<template>
  <div style="border: 1px solid #f5f5f5">
    <div style="width: 100%; height: 570px; overflow-y: auto">
      <div
        class="fw-bolder"
        style="background-color: #f5f5f5; padding: 5px 10px"
        >货品详情</div
      >
      <div class="padding-x-15">
        <a-form
          class="margin-y-15"
          :label-col="{
            md: { span: 7 },
            sm: { span: 4 },
            xs: { span: 24 }
          }"
          :wrapper-col="{
            md: { span: 17 },
            sm: { span: 20 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="20" :sm="20" :xs="20">
              <div class="fw-bolder margin-y-15">采购基本信息</div>
              <a-form
                class="margin-y-15"
                :label-col="{
                  md: { span: 7 },
                  sm: { span: 4 },
                  xs: { span: 24 }
                }"
                :wrapper-col="{
                  md: { span: 17 },
                  sm: { span: 20 },
                  xs: { span: 24 }
                }"
              >
                <a-row :gutter="24">
                  <!-- <a-col :md="12" :sm="12" :xs="12">
					  <div class="flex align-center padding-y-10">
						<div class="margin-right-10">供应商：</div>
						<div class="flex1">{{ info.supplier_code_name }}</div>
					  </div>
					</a-col> -->
                  <a-col :md="12" :sm="12" :xs="12">
                    <div class="flex align-center padding-y-10">
                      <div class="margin-right-10">收货方式：</div>
                      <div class="flex1">{{ info.receive_type_name }}</div>
                    </div>
                  </a-col>
                  <!-- <a-col :md="12" :sm="12" :xs="12" >
										  <div class="flex align-center padding-y-10">
											  <div class="margin-right-10">货品类别：</div>
											  <div class="flex1">{{info.receive_type_name}}</div>
										  </div>
									  </a-col> -->
                  <a-col :md="12" :sm="12" :xs="12">
                    <div class="flex align-center padding-y-10">
                      <div class="margin-right-10">入库位置：</div>
                      <div class="flex1">{{ info.come_type_code_name }}</div>
                    </div>
                  </a-col>
                  <a-col :md="12" :sm="12" :xs="12">
                    <div class="flex align-center padding-y-10">
                      <div class="margin-right-10">结算方式：</div>
                      <div class="flex1">{{ info.settle_type_name }}</div>
                    </div>
                  </a-col>
                </a-row>
              </a-form>
            </a-col>
            <a-col :md="4" :sm="4" :xs="4">
              <div></div>
            </a-col>
          </a-row>
        </a-form>
        <a-form
          class="margin-y-15"
          :label-col="{
            md: { span: 7 },
            sm: { span: 4 },
            xs: { span: 24 }
          }"
          :wrapper-col="{
            md: { span: 17 },
            sm: { span: 20 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="20" :sm="20" :xs="20">
              <div class="fs-16 fw-bolder margin-y-15">货品信息</div>
              <a-form
                class="margin-y-15"
                :label-col="{
                  md: { span: 7 },
                  sm: { span: 4 },
                  xs: { span: 24 }
                }"
                :wrapper-col="{
                  md: { span: 17 },
                  sm: { span: 20 },
                  xs: { span: 24 }
                }"
              >
                <a-row :gutter="24">
                  <a-col
                    :md="12"
                    :sm="12"
                    :xs="12"
                    v-for="(item, index) in goods.sku_info"
                    :key="index"
                    v-show="item.column != 'thumb'"
                  >
                    <div class="flex align-center padding-y-10">
                      <div class="margin-right-10">{{ item.name }}：</div>
                      <div class="flex1" :class="{ mohu: item.do_secret == 1 }">
                        <template
                          v-if="
                            item.column_type == 'selectajaxlike' ||
                            item.column_type == 'select' ||
                            item.column_type == 'selectajax'
                          "
                        >
                          {{ item.value_name }}
                        </template>
                        <template v-else>
                          {{ item.value }}
                        </template>
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form>
            </a-col>
            <a-col :md="4" :sm="4" :xs="4" v-if="thumb_url">
              <div
                ><img :src="thumb_url" style="width: 100px; height: 100px"
              /></div>
            </a-col>
          </a-row>
        </a-form>
        <template v-if="table1.tableData.length > 0">
          <div class="fs-16 fw-bolder margin-y-15">主石信息</div>
          <div>
            <vxe-table
              ref="table1111"
              border
              show-overflow
              :column-config="{ resizable: true }"
              :loading="table1.loading"
              :data="table1.tableData"
            >
              <vxe-column type="seq" title="NO" width="60" fixed="left" />
              <vxe-column
                :field="item.column"
                :title="item.name"
                width="150"
                v-for="(item, index) in table1.column"
                :key="index"
              />
            </vxe-table>
          </div>
        </template>
        <template v-if="table2.tableData.length > 0">
          <div class="fs-16 fw-bolder margin-y-15">副石信息</div>
          <div>
            <vxe-table
              ref="table2222"
              border
              show-overflow
              :column-config="{ resizable: true }"
              :loading="table2.loading"
              :data="table2.tableData"
            >
              <vxe-column type="seq" title="NO" width="60" fixed="left" />
              <vxe-column
                :field="item.column"
                :title="item.name"
                width="150"
                v-for="(item, index) in table2.column"
                :key="index"
              />
            </vxe-table>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, unref, reactive, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { useRouter } from 'vue-router';
  import { receipts_purchase_detail } from '@/api/jewelry/receipts_allocation';
  import { goods_detail } from '@/api/jewelry/receipts_purchase';

  const props = defineProps({
    code: String,
    goodsCode: String
  });

  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);

  // 提交状态
  const loading = ref(false);
  const info = ref({});
  const goods = ref({});
  const goodsCode = ref(null);
  const thumb_url = ref(null);
  //主石信息
  const table1 = reactive({
    loading: false,
    column: [],
    tableData: []
  });
  //副石信息
  const table2 = reactive({
    loading: false,
    column: [],
    tableData: []
  });

  onMounted(() => {
    goodsCode.value = props.goodsCode;
    getDetail();
    receipts_purchase_detail({ code: props.code, page: 1 }).then((res) => {
      info.value = res.receipts_detail;
    });
  });
  const change = (val) => {
    goodsCode.value = val;
    getDetail();
  };
  const getDetail = () => {
    goods_detail({ goods_code: goodsCode.value })
      .then((res) => {
        goods.value = res.goods_info;
        table1.column = res.goods_info.master_gem.column;
        table1.tableData = res.goods_info.master_gem.row_list;
        table2.column = res.goods_info.vice_gem.column;
        table2.tableData = res.goods_info.vice_gem.row_list;
        thumb_url.value =
          res.goods_info.thumb_url == 0 ? '' : res.goods_info.thumb_url;
      })
      .catch((e) => {
        message.error(e);
      });
  };
  defineExpose({
    change
  });
</script>
<style scoped></style>
